import React, {Component} from 'react';
import {connect} from 'react-redux';
import {base} from 'nc-lightapp-front';
const {NCTabs, NCIcon, NCButton} = base;
const NCTabPane = NCTabs.NCTabPane;

import './index.less';

const showTypeList="uf-navmenu";
const showTypeCard="uf-4square";
class WorkbenchTab extends Component {
    constructor(props) {
        super()
    }

    buttonClick(key) {
        this.props.btnsClick(key)
    }

    render() {
        
        const {tabs, showNumbers, showBtnsRight, btnsRight, defaultActiveKey, superBtn, btnsLeftArea} = this.props
        const {selectTabChange, currentKey} = this.props

        let btns
        let defaultActiveTab = defaultActiveKey;
        if(defaultActiveTab == null){
            if(tabs != null && tabs.length>0){
                defaultActiveTab = tabs[0].attrcode;
            }
        }
        if (showBtnsRight) {
            btns = btnsRight.map(each => (
                <NCButton
                    fieldid={each.key}
                    colors={ each.color }
                    onClick={ this.buttonClick.bind(this, each.key) }>
                    {each.name}</NCButton>
            ))
        }

        return (
            <div id="SysComponentsWorkbenchTab" className='nc-theme-area-bgc'>
                <NCTabs 
                    defaultActiveKey={defaultActiveTab}
                    activeKey={currentKey || tabs[0].attrcode}
                    navtype="turn" 
                    contenttype="moveleft" 
                    onChange={selectTabChange.bind(this)}
                    extraContent={
                        <div className="tab-right">
                            <div 
                                className="tab-btns"
                                style={{
                                    marginTop: btnsLeftArea ? '0' : '5px',
                                    marginRight: btnsLeftArea ? '0' : '20px',
                                }}
                            >
                                {!!btnsLeftArea && btnsLeftArea}
                                {btns}
                                {!!superBtn && superBtn}
                            </div>
                        </div>
                    }
                >
                    {
                        tabs.map((one, index)=>{
                            if(showNumbers[one.attrcode]!=null){
                                return (
                                    <NCTabPane key={one.attrcode} tab={one.label+" "+showNumbers[one.attrcode]}>
                                    </NCTabPane>
                                )
                            }else{
                                return (
                                    <NCTabPane key={one.attrcode} tab={one.label}>
                                    </NCTabPane>
                                )
                            }
                            
                        })
                    }
                </NCTabs>

                {/* {
                    showBtnsRight ? (
                        <div className="tab-btns">
                            {btns}
                            {!!superBtn && superBtn}
                        </div>
                    ) : null
                } */}
            </div>
        )
    }
}

export default WorkbenchTab;